<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        // vm.$el => 当前实例渲染的DOM对象 (vue实例上根DOM元素 ,就是当前实例获取到的DOM对象)
        // vm.$destroy();

        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据
                title:"哈哈哈哈啊哈哈哈哈哈"
            },
            beforeCreate(){//1.会在new 实例化开始 ,对vue内部事件 , 生命周期函数初始化完成后调用
                console.log('1.vue实例化完成,事件,生命周期函数就绪...',this.title , this.$el);
            },
            created(){//[√] 2.此阶段:已经将data数据(方法)注入,并且实现数据的监听器处理(响应式数据处理)
                //此阶段经常可以用来进行数据的操作,请求数据...
                console.log('2.已经在vue实例中注入数据和实现数据的监听器...',this.title ,this.$el);
            },
            beforeMount(){//3.已经有实例模板(并且已经编译),但是尚未挂载到页面(没有将渲染后的内容更新到DOM中),所以当前实例的DOM还是属于编译之前的DOM模板内容
                console.log('3.已经将实例模板编译完成,但是尚未更新到DOM',this.title , this.$el.innerHTML);
            },
            mounted(){//[√] 4.已经创建好(模板内容)编译后的DOM对象 , 并且将它替换掉之前的vm.$el DOM对象
                //此阶段可以去进行DOM的操作(可以对新DOM进行修改样式,获取属性值之类的) 
                console.log('4.此时已经将模板内容渲染,生成新DOM对象替换掉之前的模板DOM对象',this.title , this.$el);
            },
            beforeUpdate(){//5.当实例中的数据发生变化时会调用(数据变化了,但是还未更新到DOM)
                console.log('5.data数据有发生变化...',this.title ,this.$el.innerHTML);
            },
            updated(){//6.数据发生变化后 ,已经将新的数据渲染到DOM上了
                console.log('6.已经将最新的数据渲染到DOM...',this.title ,this.$el.innerHTML);
            },
            beforeDestroy(){//7.当vue实例或组件被销毁前调用 (实例为什么要销毁?= > 释放有限的资源)
                console.log('7.销毁之前...',this.title,this.$el);
            },
            destroyed(){//8.当vue实例或组件被销毁后调用 (将vue实例中的事件 和 数据的监听器 等全部移除)
                console.log('8.销毁之后...',this.title,this.$el);
            },
            methods:{//当前Vue实例中使用到的方法

            },
            // template:`<mark>啊哈哈哈哈哈哈哈哈</mark>`,//如果没有设置template属性, vue会默认把el选择器中的html当作是当前实例的模板 , 如果有则直接使用template内容当作vue实例模板
        })

        //手动挂载
        // vm.$mount("#app");
    </script>
</body>
</html>